<template>
      <div id="expand" style="position: fixed; margin-top: -35px">
        <div style="width: 50px;height:100vh;float: left;">
          <img :src="dot_left_2" style="width: 6px; margin-top: 28vh;  margin-left: 2.2vh;"/>
        </div>
        <div style="width: calc(100% - 100px); height:100vh;float: left">
          <div style="width: 100%;height: 50px;">
            <img :src="dot_left" style="height: 15px; margin-top: 1.3vh; margin-left: 33vh;"/>
            <img :src="dot_right"
                 style="height: 15px; margin-top: 1.3vh; margin-right: 32vh; float: right;"/>
          </div>
          <div style="width: 100%;height: calc(100% - 50px)">
            <div style="float: left;width: 22%;height: 100%;">
              <img :src="logo" style="    width: 70px; margin-top: -1vh;"/>
              <div class="left-table1">
                <div class="left-head1">
                  <img :src="dot_flash"
                       style="height: 4px;margin-top: 2vh;float: right; margin-right: 1vh;"/>
                </div>
                <div class="left-body1">
                  <div style="width: 100%;height: 70%">
                    <div class="right-table-item" style="width: 40%;    margin-top: 20px;">
                <span class="right-table-item-name2">
                  总户数
                </span>
                      <span class="right-table-item-value">
                  {{ countSum.count }}<span class="left-table-item-i">户</span>
                </span>
                    </div>
                    <div class="right-table-item"
                         style="width: 60%; justify-content: left;   margin-top: 20px;">
                <span class="right-table-item-name2" style="text-align: left">
                  本年签约
                </span>
                      <div style="width: 100%;text-align: left">
                    <span class="right-table-item-value">
                      {{countSum.bnqyhs}}<span class="left-table-item-i">户</span>
                    </span>
                        <span class="right-table-item-value" style="    margin-left: 15px;">
                     {{ parseFloat((countSum.bnqyje/10000).toFixed(2))  }}<span class="left-table-item-i">万元</span>
                    </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="left-table2">
                <div class="left-head2">
                  <img :src="dot_flash"
                       style="height: 4px;margin-top: 2vh;float: right; margin-right: 1vh;"/>
                </div>
                <div class="left-body2">
                  <div style="width: 100%;height: 35%">
                    <div @click="getExpandList" style="cursor: pointer" class="left-table-item2">
                      <span class="left-table-item-left right-table-item-name2 ">
                        拓展
                      </span>
                      <span class="left-table-item-left right-table-item-value ">
                  {{countSum.bytz}}
                        <span class="left-table-item-i">户</span>
                </span>
                    </div>
                    <div class="left-table-item2">
                <span class="right-table-item-name2">
                  拜访次数
                </span>
                      <span class="right-table-item-value">
                  {{countSum.bybf}}<span class="left-table-item-i">次</span>
                </span>
                    </div>
                    <div class="left-table-item2">
                <span class="right-table-item-name2" style="text-align: left">
                  流失
                </span>
                      <span class="right-table-item-value" style="text-align: left">
                  0<span class="left-table-item-i">份</span>
                </span>
                    </div>
                  </div>
                  <div style="height: 65%; width: 100%">
                    <Echart v-if="chartsShow" :options="echartsOption" :height="100"/>
                  </div>
                </div>
              </div>
              <div class="left-table3">
                <div class="left-head3">
                  <img :src="dot_flash"
                       style="height: 4px;margin-top: 2vh;float: right; margin-right: 1vh;"/>
                </div>
                <div class="left-body3">
                  <div style="width: 100%;height: 35%">
                    <div  @click="getContractArchiveViewList('2')"  style="cursor: pointer"  class="left-table-item2">
                    <span class="right-table-item-name2 left-table-item-left">
                      新签户数
                    </span>
                      <span class="right-table-item-value left-table-item-left">
                  {{ countSum.qyhs }}<span class="left-table-item-i">户</span>
                </span>
                    </div>
                    <div class="left-table-item2">
                <span class="right-table-item-name2 left-table-item-left">
                  环比
                </span>
                      <span class="right-table-item-value left-table-item-left">
                  {{ parseFloat((calculateMoM(countSum.qyhs,countSum.syqyhs)).toFixed(0)) }}<span class="left-table-item-i">%</span>
                </span>
                    </div>
                    <div @click="getContractArchiveViewList('-1')"  style="cursor: pointer"  class="left-table-item2">
                <span class="right-table-item-name2 left-table-item-left">
                  签约合同额
                </span>
                      <span class="right-table-item-value left-table-item-left">
                   {{ parseFloat((countSum.qyje/10000).toFixed(2))  }}<span class="left-table-item-i">万元</span>
                </span>
                    </div>
                  </div>
                  <div style="height: 65%; width: 100%">
                    <Echart v-if="chartsShow" :options="echartsOption2" :height="100"/>
                  </div>
                </div>
              </div>
              <div class="left-table4">
                <div class="left-head4">
                  <img :src="dot_flash"
                       style="height: 4px;margin-top: 2vh;float: right; margin-right: 1vh;"/>
                </div>
                <div class="left-body4">
                  <div style="width: 100%;height: 70%">
                    <div  @click="getContractReceiveRecordViewList('1')"  style="cursor: pointer"  class="left-table-item2">
                <span class="right-table-item-name2 left-table-item-left"
                      style="margin-left: 12px;">
                  本月到期收款
                </span>
                      <span class="right-table-item-value left-table-item-left">
                  {{ parseFloat((countSum.bydqsk/10000).toFixed(2))  }}<span class="left-table-item-i">万元</span>
                </span>
                    </div>
                    <div @click="getContractArchiveViewList('-2')"  style="cursor: pointer" class="left-table-item2">
                <span class="right-table-item-name2 left-table-item-left">
                  到期续签
                </span>
                      <span class="right-table-item-value left-table-item-left">
                  {{ countSum.dqxq }}<span class="left-table-item-i">份</span>
                </span>
                    </div>
                    <div  @click="getContractArchiveViewList('3')"  style="cursor: pointer"  class="left-table-item2">
                <span class="right-table-item-name2 left-table-item-left" style="text-align: left">
                  逾期未续签
                </span>
                      <span class="right-table-item-value left-table-item-left"
                            style="text-align: left">
                  {{ countSum.yqwxq }}<span class="left-table-item-i">份</span>
                </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--    中间地图    -->
            <div style="float: left;width: 51%;height: calc(100% - 22px); margin-top: 22px;">
              <div style="height: 95%; width: 100%;    overflow: hidden;">
                <div style="height: 115%; width: 110%">
                  <BaiduMap ref="baiduMap" v-if="showMap"
                    :ak="bmapAk"
                    :center="mapCenter"
                    :zoom="zoomLevel"
                    :points="markerPoints"
                  />
                </div>
                <!--            <Echart :options="echartsOptionMap" :height="600" />-->

              </div>
            </div>
            <div style="float: left;width: 27%;height: 100%;">
              <div style="height: 4vh;    margin-top: -7px;width: 100%;">
                <div style="margin-left: 20px; cursor: pointer" @click="fullScreen()"
                     class="right-top">
                  全屏切换
                </div>
                <div style="margin-left: 12px;" @click="closeTab" class="right-top">
                  关闭
                </div>
                <div style="margin-left: 12px;color: rgb(192, 228, 255); font-size: 11px"
                     @click="setTenantVisible"
                     class="right-top">
                  {{ saleTeamName }}
                  <CaretBottom style="width: 1em; height: 1em;"/>
                </div>
                <div style="margin-left: 12px;color: rgb(192, 228, 255); font-size: 11px"
                     @click="setMonthVisible"
                     class="right-top">
                  {{ monthSelect }}
                  <CaretBottom style="width: 1em; height: 1em; "/>
                </div>
              </div>

              <div class="left-table5">
                <div class="left-head5">
                  <div @click="setDialogTableVisible" class="right-button">拓展记录清单</div>
                  <img :src="dot_flash"
                       style="height: 4px;margin-top: 2vh;float: right; margin-right: 1vh;"/>
                  <div
                    style="color:#fafafa;    font-size: 10px;    float: right;  line-height: 3vh;">
                    (共{{ allUserExpand.length }}条)
                  </div>
                </div>
                <div v-if="showRightDeteil" class="left-body5"
                     style="width: 100%;height: 100%;padding: 8px;">
                  <div style="width: 100%;height: 20px; ">
                    <el-icon style="cursor:pointer; float: left" @click="showRightDeteil = false">
                      <Back/>
                    </el-icon>
                    <span class="right-table-item-name">
                  {{ visitName }} 拓展明细
                </span>
                  </div>
                  <div class="right-detail-item" v-for="(item,it) in visitCustomer" :key="it">
                    <div class="right-detail-item-div">
                      <div class="right-detail-item-div-title">
                        <span class="right-detail-item-div-no">{{ item.value }}</span>
                        <span style="font-size: 10px;color: #8aabca;margin-left: 5px">{{
                            item.unit
                          }}</span>
                      </div>
                      <div class="right-detail-item-div-title" style="    line-height: 8px;">
                        <span style="color:#c0e4ff;font-size: 12px">{{ item.name }}</span>
                      </div>
                    </div>
                  </div>
                  <div style="width: 100%;height: 8px;float: left"></div>
                  <div style="width: 100%;height: calc(66%);overflow-y: auto">
                    <div style="height: 100px; width: 100%;float: left;"
                         v-for="(item,i) in expandRecordPage" :key="i">
                      <div style="border-right: solid #8aabca;width: 30%;height: 100%;float:left;">
                        <el-icon style="float: right; margin-right: -0.57em;">
                          <ChatDotRound style="color: #89ecfd;background-color: rgba(9,37,62,1);"/>
                        </el-icon>
                        <span
                          :class="item.expandStatus == '拓展中' ? 'expendC1' :item.expandStatus == '客户维护' ? 'expendC2' :'expendC3'"
                          style="  font-size: 11px; padding: 2px 4px; border-radius: 4px; float: right;  margin-right: 10px;">
                          {{ item.expandStatus }}
                        </span>
                        <span style="font-size: 11px;   color: rgb(250, 250, 250); margin-right: 20px; margin-top: 4px;  float: right;">
                          {{ item.createTimeStr }}
                        </span>
                      </div>
                      <div style=";width: 70%;height: 100% ;float:left;">
                        <div @click="setCenterMap(item)"
                          style="width: 100%;font-size: 12px; text-align: left;color: #fafafa;padding-left: 16px; cursor: pointer">
                          <span style="height: 14px;line-height: 14px;">{{
                              item.interviewee
                            }}</span>
                          <img :src="expMarker1" width="8px"
                               style="    padding-top: 3px;  margin-left: 4px;"/>
                        </div>
                        <div style="width: 100%;padding-left: 16px;">
                    <span
                      style="border-radius: 10px;border: solid #1fc6ff 1px; padding: 1px 4px; font-size: 9px; text-align: left;color: #1fc6ff;">
                      <dict-span
                        :type="DICT_TYPE.CRM_CUSTOMER_LEVEL"
                        :value="item.customerLevel"
                      />
                    </span>
                        </div>
                        <div style="width: 100%;padding-left: 16px;">
                    <span style="font-size: 11px; text-align: left;color: #009dff;">
                    累计第{{ item.bfcs }}次拜访</span>
                        </div>
                        <div style="width: 100%;padding-left: 16px;">
                    <span style="font-size: 11px; text-align: left;color: #8aabca;">
                    当前进度：    <dict-span
                      :type="DICT_TYPE.BIZ_EXPAND_PROCESS"
                      :value="item.expandProcess"
                    /></span>
                          <span @click="openForm( item.id)"
                                style="font-size: 11px;margin-left: 8px; text-align: left;color: #009dff;cursor: pointer">
                    查看详情</span>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
                <div v-else style="width: 100%;height: 100%">
                  <div
                    style=" background-color: rgba(255, 255, 255, 0.12);margin: 5px 10px; padding: 0px 10px; border-radius: 5px;">
                <span
                  style="font-size: 11px; color: #c0e4ff;line-height: 17px;display: grid; height: 20px;">
                  按新拓综合能力评分排名
                </span>
                  </div>
                  <div style="height: calc(100% - 6vh);width: 100%; overflow-y: auto">
                    <div @click="handelShowRightDeteil(item)" class="right-table"
                         v-for="(item,i) in allUserExpand" :key="i">
                      <div class="right-table-item" style="display: flex;justify-content: left;">
                        <img :src="i == 0? no1: i == 1? no2:i == 2 ? no3: ''"
                             style="height: 17px;float: left; margin-left: -10px"/>
                        <span style="color:#fafafa;" v-if="i>2">{{ i }}</span>
                        <span class="right-table-item-name">
                  {{ item.user.nickname }}
                </span>
                      </div>
                      <div class="right-table-item">
                <span class="right-table-item-name2">
                  拜访户数
                </span>
                        <span class="right-table-item-value">
                  {{ item.expandRecordCountRespVO.bfkh }}
                </span>
                      </div>
                      <div class="right-table-item">
                <span class="right-table-item-name2">
                  拜访次数
                </span>
                        <span class="right-table-item-value">
                  {{ item.expandRecordCountRespVO.bfcs }}
                </span>
                      </div>
                      <div class="right-table-item">
                <span class="right-table-item-name2">
                  签约户数
                </span>
                        <span class="right-table-item-value">
                  {{ item.expandRecordCountRespVO.cgqy }}
                </span>
                      </div>
                    </div>
                  </div>
                </div>


              </div>
            </div>
          </div>
        </div>
        <div style="width: 50px;height:100vh;float: left;">
          <img :src="dot_right_2" style="width: 6px; margin-top: 28vh; margin-left: 4.7vh;"/>
        </div>
      </div>
      <!--   详情dialog   -->
      <el-dialog
        style="background-color: rgba(6, 27, 46, .7);  border: 1px solid #74cefd; box-shadow: 0 8px 24px rgba(127, 192, 236, .5);"
        v-model="showDialog"
        :title="dialogTitle"
        :width="'80%'"
        :close-on-esc="true"
        :lock-scroll="true"
      >
        <el-form
          ref="formRef"
          :model="formData"
          label-width="130px"
          v-loading="formLoading"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="受访人：" prop="interviewee">
                {{ formData.interviewee }}
                <!--              <el-input v-model="formData.interviewee" placeholder="请输入受访人" />-->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="受访人电话：" prop="intervieweePhone">
                {{ formData.intervieweePhone }}
                <!--              <el-input v-model="formData.intervieweePhone" placeholder="请输入受访人电话" />-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="受访人职位：" prop="intervieweePosition">
                {{ formData.intervieweePosition }}
                <!--              <el-input v-model="formData.intervieweePosition" placeholder="请输入受访人职位" />-->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户需求：" prop="customerRequire">
                <!--              <el-input v-model="formData.customerRequire" placeholder="请输入客户需求" />-->
                {{ formData.customerRequire }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="切入点：" prop="breakthroughPoint">
                <dict-span
                  :type="DICT_TYPE.FOLLOW_UP_BERAKTHROUGH_POINT"
                  :value="formData.breakthroughPoint"
                />
                <!--              <el-select-->
                <!--                v-model="formData.breakthroughPoint"-->
                <!--                placeholder="请选择切入点"-->
                <!--                class="w-1/1"-->
                <!--              >-->
                <!--                <el-option-->
                <!--                  v-for="dict in getStrDictOptions(DICT_TYPE.FOLLOW_UP_BERAKTHROUGH_POINT)"-->
                <!--                  :key="dict.value"-->
                <!--                  :label="dict.label"-->
                <!--                  :value="dict.value"-->
                <!--                />-->
                <!--              </el-select>-->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拓展时间：" prop="expandTime">
                {{ formatTime(formData.expandTime, 'yyyy-MM-dd') }}
                <!--              <el-date-picker-->
                <!--                v-model="formData.expandTime"-->
                <!--                type="date"-->
                <!--                value-format="x"-->
                <!--                placeholder="选择拓展时间"-->
                <!--                style="width: 100%"-->
                <!--              />-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="业务类型：" prop="businessType">
                <dict-span
                  :type="DICT_TYPE.BIZ_BUSINESS_TYPE"
                  :value="formData.businessType"
                />
                <!--              <el-select v-model="formData.businessType" placeholder="请选择业务类型" class="w-1/1">-->
                <!--                <el-option-->
                <!--                  v-for="dict in getStrDictOptions(DICT_TYPE.BIZ_BUSINESS_TYPE)"-->
                <!--                  :key="dict.value"-->
                <!--                  :label="dict.label"-->
                <!--                  :value="dict.value"-->
                <!--                />-->
                <!--              </el-select>-->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="拓展进度：" prop="expandProcess">
                <dict-span
                  :type="DICT_TYPE.BIZ_EXPAND_PROCESS"
                  :value="formData.expandProcess"
                />
                <!--              <el-select v-model="formData.expandProcess" placeholder="请选择拓展进度" class="w-1/1">-->
                <!--                <el-option-group-->
                <!--                  v-for="group in ExpandProcessOptionsGroup"-->
                <!--                  :key="group.label"-->
                <!--                  :label="group.label"-->
                <!--                >-->
                <!--                  <el-option-->
                <!--                    v-for="item in group.options"-->
                <!--                    :key="item.value"-->
                <!--                    :label="item.label"-->
                <!--                    :value="item.value"-->
                <!--                  />-->
                <!--                </el-option-group>-->
                <!--              </el-select>-->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="增值业务：" prop="valueAddService"
                            v-if="formData.businessType == '2'">
                <dict-span
                  :type="DICT_TYPE.BIZ_VALUE_ADD_SERVICE"
                  :value="formData.valueAddService"
                />
                <!--              <el-select-->
                <!--                v-model="formData.valueAddService"-->
                <!--                placeholder="请选择增值业务"-->
                <!--                class="w-1/1"-->
                <!--              >-->
                <!--                <el-option-->
                <!--                  v-for="dict in getStrDictOptions(DICT_TYPE.BIZ_VALUE_ADD_SERVICE)"-->
                <!--                  :key="dict.value"-->
                <!--                  :label="dict.label"-->
                <!--                  :value="dict.value"-->
                <!--                />-->
                <!--              </el-select>-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="拓展情况：" prop="expandSituation">
                <!--              <el-input v-model="formData.expandSituation" placeholder="请输入拓展情况" />-->
                {{ formData.expandSituation }}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户类型：" prop="customerType">
                <dict-span
                  :type="DICT_TYPE.FOLLOW_UP_CUSTOMER_TYPE"
                  :value="formData.customerType"
                />
                <!--              <el-select v-model="formData.customerType" placeholder="请选择客户类型">-->
                <!--                <el-option-->
                <!--                  v-for="dict in getStrDictOptions(DICT_TYPE.FOLLOW_UP_CUSTOMER_TYPE)"-->
                <!--                  :key="dict.value"-->
                <!--                  :label="dict.label"-->
                <!--                  :value="dict.value"-->
                <!--                />-->
                <!--              </el-select>-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="客户级别：" prop="customerLevel">
                <dict-span
                  :type="DICT_TYPE.CRM_CUSTOMER_LEVEL"
                  :value="formData.customerLevel"
                />
                <!--              <el-select v-model="formData.customerLevel" placeholder="请选择客户级别">-->
                <!--                <el-option-->
                <!--                  v-for="dict in getStrDictOptions(DICT_TYPE.CRM_CUSTOMER_LEVEL)"-->
                <!--                  :key="dict.value"-->
                <!--                  :label="dict.label"-->
                <!--                  :value="dict.value"-->
                <!--                />-->
                <!--              </el-select>-->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下次拜访时间：" prop="nextTimeVisit">
                {{ formatTime(formData.nextTimeVisit, 'yyyy-MM-dd') }}

                <!--              <el-date-picker-->
                <!--                v-model="formData.nextTimeVisit"-->
                <!--                type="date"-->
                <!--                value-format="x"-->
                <!--                placeholder="选择下次拜访时间"-->
                <!--                style="width: 100%"-->
                <!--              />-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="现场图片：" prop="scenePictureUrl">
                <UploadImgs v-model="formData.scenePictureUrl" class="min-w-80px"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="安全评测报告：" prop="securityReportUrl">
                <UploadFile v-model="formData.securityReportUrl" class="min-w-80px"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="服务方案附件：" prop="serviceSchemeUrl">
                <UploadFile v-model="formData.serviceSchemeUrl" class="min-w-80px"/>
              </el-form-item>
            </el-col>
          </el-row>
          <!--        <el-row>-->
          <!--          <el-col :span="4">-->
          <!--            <el-button style="margin-bottom: 20px">定位</el-button>-->
          <!--          </el-col>-->
          <!--          <el-col :span="10">-->
          <!--            <el-form-item label="经度" prop="lng">-->
          <!--              {{formData.lng }}-->
          <!--&lt;!&ndash;              <el-input v-model="formData.lng" placeholder="请输入经度" />&ndash;&gt;-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="10">-->
          <!--            <el-form-item label="纬度：" prop="lat">-->
          <!--              {{ formData.lat}}-->
          <!--&lt;!&ndash;              <el-input v-model="formData.lat" placeholder="请输入纬度" />&ndash;&gt;-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--        </el-row>-->
        </el-form>
      </el-dialog>
      <!--   租户选择dialog   -->
      <el-dialog
        style="background-color: rgba(6, 27, 46, .7);  border: 1px solid #74cefd; box-shadow: 0 8px 24px rgba(127, 192, 236, .5);"
        v-model="tenantVisible" width="300px" append-to-body title="请选择销售团队"
        :close-on-click-modal="false">
        <el-form>
          <el-form-item label="销售团队" >
            <el-select v-model="tenantSelect" placeholder="请选择销售团队">
              <el-option
                v-for="dict in tenantList"
                :key="dict.teamId"
                :label="dict.teamName"
                :value="dict.teamId"/>
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="tenantVisible = false">取消</el-button>
            <el-button type="primary" @click="submitTeamSelect">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
      <!--   日期选择dialog   -->
      <el-dialog
        style="background-color: rgba(6, 27, 46, .7); border: 1px solid #74cefd; box-shadow: 0 8px 24px rgba(127, 192, 236, .5);"
        v-model="monthVisible" width="300px" append-to-body title="请选择月份"
        :close-on-click-modal="false">
        <el-form>
          <el-form-item label="统计月份" :label-width="formLabelWidth">
            <el-date-picker
              v-model="monthSelect"
              type="month"
              value-format="YYYY-MM"
              placeholder="请选择月份"
            />

          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="monthVisible = false">取消</el-button>
            <el-button type="primary" @click="monthSelectSubmit">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
      <!--   拓展记录清单dialog   -->
      <el-dialog
        style="background-color: rgba(6, 27, 46, .7);  border: 1px solid #74cefd;  box-shadow: 0 8px 24px rgba(127, 192, 236, .5);"
        v-model="dialogTableVisible" width="90%" append-to-body title="拓展记录清单"
        :close-on-click-modal="false">
        <!-- 搜索工作栏 -->
        <el-form
          class="-mb-15px"
          :model="queryParams"
          ref="queryFormExpandRef"
          :inline="true"
          label-width="88px"
        >
          <el-form-item label="受访人" prop="interviewee">
            <el-input
              v-model="queryParams.interviewee"
              placeholder="请输入受访人"
              clearable
              @keyup.enter="handleQuery"
              class="!w-155px"
            />
          </el-form-item>
          <el-form-item label="受访人电话" prop="intervieweePhone">
            <el-input
              v-model="queryParams.intervieweePhone"
              placeholder="请输入受访人电话"
              clearable
              @keyup.enter="handleQuery"
              class="!w-155px"
            />
          </el-form-item>
          <el-form-item label="拓展时间" prop="expandTime">
            <el-date-picker
              ref="dataExpand"
              v-model="queryParams.expandTime"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
              class="!w-220px"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="handleQuery">
              <Icon icon="ep:search" class="mr-5px"/>
              搜索
            </el-button>
            <el-button @click="resetQuery">
              <Icon icon="ep:refresh" class="mr-5px"/>
              重置
            </el-button>
            <!--            <el-button-->
            <!--              type="primary"-->
            <!--              plain-->
            <!--              @click="openForm('create')"-->
            <!--              v-hasPermi="['san:biz-expand-record:create']"-->
            <!--            >-->
            <!--              <Icon icon="ep:plus" class="mr-5px"/>-->
            <!--              新增-->
            <!--            </el-button>-->
            <el-button
              type="success"
              plain
              @click="handleExport"
              :loading="exportLoading"
              v-hasPermi="['san:biz-expand-record:export']"
            >
              <Icon icon="ep:download" class="mr-5px"/>
              导出
            </el-button>
            <!--        <el-button-->
            <!--          type="danger"-->
            <!--          plain-->
            <!--          :disabled="isEmpty(checkedIds)"-->
            <!--          @click="handleDeleteBatch"-->
            <!--          v-hasPermi="['san:biz-expand-record:delete']"-->
            <!--        >-->
            <!--          <Icon icon="ep:delete" class="mr-5px" /> 批量删除-->
            <!--        </el-button>-->
          </el-form-item>
        </el-form>
        <!--    </ContentWrap>-->

        <!-- 列表 -->
        <!--    <ContentWrap>-->
        <el-table
          row-key="id"
          v-loading="loading"
          :data="list"
          ref="expandTable"
          :show-overflow-tooltip="true"
          @selection-change="handleRowCheckboxChange"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column label="受访人" align="center" prop="interviewee"/>
          <el-table-column label="受访人电话" align="center" prop="intervieweePhone"/>
          <el-table-column label="受访人职位" align="center" prop="intervieweePosition"/>
          <el-table-column label="客户需求" align="center" prop="customerRequire"/>
          <el-table-column label="切入点" align="center" prop="breakthroughPoint">
            <template #default="scope">
              <dict-tag
                :type="DICT_TYPE.FOLLOW_UP_BERAKTHROUGH_POINT"
                :value="scope.row.breakthroughPoint"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="拓展时间"
            align="center"
            prop="expandTime"
            :formatter="dateFormatter2"
            width="100px"
          />
          <el-table-column label="业务类型" align="center" prop="businessType">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.BIZ_BUSINESS_TYPE" :value="scope.row.businessType"/>
            </template>
          </el-table-column>
          <el-table-column label="客户类型" align="center" prop="customerType">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.FOLLOW_UP_CUSTOMER_TYPE" :value="scope.row.customerType"/>
            </template>
          </el-table-column>
          <el-table-column label="客户级别" align="center" prop="customerLevel">
            <template #default="scope">
              <dict-tag :type="DICT_TYPE.CRM_CUSTOMER_LEVEL" :value="scope.row.customerLevel"/>
            </template>
          </el-table-column>
          <el-table-column
            label="下次拜访时间"
            align="center"
            prop="nextTimeVisit"
            :formatter="dateFormatter2"
            width="110px"
          />
          <el-table-column label="操作" align="center" min-width="120px">
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="openForm(scope.row.id)"
                v-hasPermi="['san:biz-expand-record:update']"
              >
                详情
              </el-button>
              <!--            <el-button-->
              <!--              link-->
              <!--              type="danger"-->
              <!--              @click="handleDelete(scope.row.id)"-->
              <!--              v-hasPermi="['san:biz-expand-record:delete']"-->
              <!--            >-->
              <!--              删除-->
              <!--            </el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <Pagination
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
        <template #footer>
          <div class="dialog-footer">
            <div style="height:30px;width:100px;"></div>
          </div>
        </template>
      </el-dialog>
  <!--   左侧拓展记客户dialog   -->
  <el-dialog
    style="min-height: 500px;background-color: rgba(6, 27, 46, .7);  border: 1px solid #74cefd;  box-shadow: 0 8px 24px rgba(127, 192, 236, .5);"
    v-model="dialogExpandTableVisible" width="90%" append-to-body :title="expandTitle"
    :close-on-click-modal="false">
    <!-- 搜索工作栏 -->
    <el-form v-if="expandTitle == '拓展客户'"
      class="-mb-15px"
      :model="queryExpandParams"
      ref="queryExpandParamsRef"
      :inline="true"
      label-width="88px"
    >
      <el-form-item label="有跟访" prop="hasFollow">
        <el-switch v-model="queryExpandParams.hasFollow" active-value="1" inactive-value="0"/>
<!--        <el-input-->
<!--          v-model="queryExpandParams.hasFollow"-->
<!--          placeholder=""-->
<!--          clearable-->
<!--          @keyup.enter="handleExpandQuery"-->
<!--          class="!w-240px"-->
<!--        />-->
      </el-form-item>
      <el-form-item label="有附件" prop="hasFile">
        <el-switch v-model="queryExpandParams.hasFile" active-value="1" inactive-value="0"/>
<!--        <el-input-->
<!--          v-model="queryExpandParams.hasFile"-->
<!--          placeholder=""-->
<!--          clearable-->
<!--          @keyup.enter="handleExpandQuery"-->
<!--          class="!w-240px"-->
<!--        />-->
      </el-form-item>
      <el-form-item label="拓展时间" prop="expandTime">
        <el-date-picker
          ref="dataExpand"
          v-model="queryExpandParams.expandTimeStr"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleExpandQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
<!--        <el-button @click="resetExpandQuery">-->
<!--          <Icon icon="ep:refresh" class="mr-5px"/>-->
<!--          重置-->
<!--        </el-button>-->
        <el-button
          type="success"
          plain
          @click="handleExpandExport"
          :loading="exportLoading"
          v-hasPermi="['san:biz-expand-record:export']"
        >
          <Icon icon="ep:download" class="mr-5px"/>
          导出
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      row-key="id"
      v-loading="loading"
      :data="expandList"
      ref="expandTable"
      :show-overflow-tooltip="true"
    >
      <template v-if="expandTitle == '拓展客户'">
        <el-table-column label="客户名称" align="center" prop="customerName"/>
        <el-table-column label="地址" align="center" prop="address"/>
        <el-table-column label="本月最后拓展人" align="center" prop="nickname"/>
        <el-table-column label="本月最后拓展时间" align="center" prop="expandTime"     width="180px"
                         :formatter="dateFormatter2"/>
        <el-table-column label="本月最后拓展进度" align="center" prop="expandProcess">
          <template #default="scope">
            <dict-tag
              :type="DICT_TYPE.BIZ_EXPAND_PROCESS"
              :value="scope.row.expandProcess"
            />
          </template>
        </el-table-column>
        <el-table-column label="累计拓展次数" align="center" prop="totalCount"/>
      </template>
      <template v-else-if="expandTitle == '本月新签合同' || expandTitle == '本月签约合同额' || expandTitle == '逾期未续签合同' || expandTitle == '到期续约合同'">
        <el-table-column  label="序号"  type="index" width="55"/>
        <el-table-column label="合同编号" align="center" prop="contractCode"/>
        <el-table-column label="客户名称" align="center" prop="customerName"/>
        <el-table-column v-if="expandTitle == '本月新签合同'|| expandTitle == '逾期未续签合同' || expandTitle == '到期续约合同'" label="合同类型" align="center" prop="contractType" width="200">
          <template #default="scope">
            <dict-tag
              :type="DICT_TYPE.BIZ_CONTRACT_ARCHIVE_CONTRACT_TYPE"
              :value="scope.row.contractType"
            />
          </template>
        </el-table-column>
        <el-table-column label="签约人" align="center" prop="companyDirectorName"/>
        <el-table-column  v-if="expandTitle == '本月新签合同' || expandTitle == '逾期未续签合同' || expandTitle == '到期续约合同'" label="签约时间" align="center" prop="signTime"     width="180px"
                         :formatter="dateFormatter2"/>
        <el-table-column  v-if="expandTitle == '本月新签合同'|| expandTitle == '逾期未续签合同' || expandTitle == '到期续约合同'" label="到期时间" align="center" prop="contractEndTime"     width="180px"
                         :formatter="dateFormatter2"/>
        <el-table-column  v-if="expandTitle == '本月签约合同额'" label="服务期限(月)" align="center" prop="contractMonthNumber"     width="180px"
                        />
        <el-table-column  v-if="expandTitle == '本月签约合同额'" label="合同金额" align="center" prop="contractPriceNumber"     width="180px"
                          />
      </template>
      <template v-else-if="expandTitle == '本月到期收款' || expandTitle == '本月签约合同q额'">
        <el-table-column  label="序号"  type="index" width="55"/>
        <el-table-column label="合同编号" align="center" prop="contractCode"/>
        <el-table-column label="客户名称" align="center" prop="customerName"/>
        <el-table-column label="签约人" align="center" prop="companyDirectorName"/>
        <el-table-column label="签约时间" align="center" prop="signTime"     width="180px"
                          :formatter="dateFormatter2"/>
        <el-table-column label="收款期数(月)" align="center" prop="instalmentCount"/>
        <el-table-column label="金额" align="center" prop="receiveMoney" />
        <el-table-column label="应收时间" align="center" prop="receiveDate"     width="180px"
                         :formatter="dateFormatter2"/>
      </template>

    </el-table>
    <!-- 分页 -->
    <Pagination style="position: absolute;
    right: 20px;
    bottom: 0px;"
      :total="expandTotal"
      v-model:page="queryExpandParams.pageNo"
      v-model:limit="queryExpandParams.pageSize"
      @pagination="getExpandList"
    />
    <template #footer>
      <div class="dialog-footer">
        <div style="height:30px;width:100px;"></div>
      </div>
    </template>
  </el-dialog>

</template>

<script setup name="expand" lang="ts">

/**
 * 拓展客户相关
 */
import ExpandTargetsCustomerDialog from '../biz/customer/ExpandTargetsCustomerDialog.vue'
/** 打开拓展客户列表 */
const targetsCustomerDialogRef = ref()
const dialogExpandTableVisible = ref(false)
const expandTitle = ref('')
const expandColumn = ref([])
const expandList = ref([])
import { dateFormatter2 } from '@/utils/formatTime'
const targetsCustomerTotal= ref([])
const targetsCustomerYear= ref([])
const customerYearList= ref([])
const year = new Date().getFullYear();
const yearList = ref([]);
const signYearList= ref([])
const getCustomerTotalList = async () => {
  loading.value = true
  try {
    // const data = await ExpandTargetCustomerApi.getExpandTargetCustomerPage(queryParams)
    // list.value = data.list
    // targetsCustomerTotal.value = data.total
    // const cYearList = await ExpandTargetCustomerApi.getExpandTargetCustomerYear(queryParams)
    const data = await ExpandTargetApi.getTotalAmount(queryExpandParams)
    console.info(data)
    // 提取month数组
    const monthArray = data.map(item => item.month);

    // 提取total_tzyhs数组，处理undefined值
    const totalTzyhsArray = data.map(item => item.total_tzyhs);

    // 提取total_bfcs数组，处理undefined值
    const totalBfcsArray = data.map(item => item.total_bfcs);

    // 提取total_qyhs数组，处理undefined值
    const totalQyhsArray = data.map(item => item.total_qyhs);
    yearList.value = monthArray;
    customerYearList.value = totalTzyhsArray;
    targetsCustomerTotal.value = totalBfcsArray;
    signYearList.value = totalQyhsArray
    chartsShow.value = true
  } finally {
    loading.value = false
  }
}
const openTargetsCustomerDialog = () => {
  dialogExpandTableVisible.value = true
}

import {onMounted, onUnmounted} from 'vue'
import {formatTime} from '@/utils'
import {isEmpty} from '@/utils/is'
import {dateFormatter, formatDate} from '@/utils/formatTime'
import download from '@/utils/download'
import {ExpandRecordApi, ExpandRecord, ExpandProcessOptionsGroup} from '@/api/biz/expand/record'
import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from '@/utils/dict'
const message = useMessage() // 消息弹窗

import ExpandForm from './ExpandForm.vue'
import logo from '@/assets/imgs/screen/0221_portal.png';
import dot_left_2 from '@/assets/imgs/screen/dot_left_2.gif';
import dot_right_2 from '@/assets/imgs/screen/dot_right_2.gif';
import dot_left from '@/assets/imgs/screen/dot_left.gif';
import dot_right from '@/assets/imgs/screen/dot_right.gif';
import dot_flash from '@/assets/imgs/screen/dot_flash.gif';
import no1 from '@/assets/imgs/screen/no1.png';
import no2 from '@/assets/imgs/screen/no2.png';
import no3 from '@/assets/imgs/screen/no3.png';
import expMarker1 from '@/assets/imgs/screen/expMarker1.png';
import expMarker2 from '@/assets/imgs/screen/expMarker2.png';
import expMarker3 from '@/assets/imgs/screen/expMarker3.png';
import {CaretBottom, Back, ChatDotRound} from '@element-plus/icons-vue'
import Echart from '@/components/Echart/src/Echart.vue'
import {EChartsOption} from 'echarts'
// 引入中国地图数据
import china from '@/assets/map/json/china.json'
import echarts from '@/plugins/echarts'
import {loadBMap} from '@/utils/loadBMap';
import BaiduMap from '@/components/baiduMap/BaiduMap.vue';
// import Dialog from './Dialog.vue';

// 全屏组件
import {useFullscreen} from '@vueuse/core'
import * as TenantApi from "@/api/system/tenant";
import {ExpandTargetCustomerApi} from "@/api/biz/expand/targets/customer";
import {now} from "lodash-es";
import {BizSalesTeamApi} from "@/api/biz/salesteam";
import {ExpandTargetApi} from "@/api/biz/expand/targets";
const {toggle, isFullscreen} = useFullscreen()
const fullScreen = () => {
  toggle()
}

// 关闭当前页
const closeTab = () => {
  // 尝试返回后再关闭
  // router.go(-1)
  setTimeout(() => {
    window.close()
  }, 100)
}

/**
 * 租户选择变量和方法
 */
const tenantList = ref([])
const tenantSelect = ref('')
const tenantVisible = ref(false)
const saleTeamName = ref('')
async function submitTeamSelect () {
  saleTeamName.value = tenantList.value.find(a => (a.teamId == tenantSelect.value)).teamName
  await getAllList(tenantSelect.value, monthSelect.value);
  tenantVisible.value = false
  showRightDeteil.value = false
}
const setTenantVisible = async () => {
  tenantVisible.value = true
}

// 获取销售小组信息
const getSalesTeamList = async () => {
  try {
    const data = await BizSalesTeamApi.getBizSalesTeamPage({pageSize: -1})
    tenantList.value = data.list;
    if(!tenantList.value){
      message.error('请先添加销售小组')
    } else {
      saleTeamName.value = tenantList.value[0].teamName
      tenantSelect.value = tenantList.value[0].teamId
      await getAllList(tenantList.value[0].teamId, monthSelect.value);
      await getCountSum( monthSelect.value);
    }
  } finally {

  }
}

/**
 * 计算环比
 * @param current
 * @param previous
 */
function calculateMoM(current, previous) {
  if (previous === 0) return current === 0 ? 0 : Infinity;
  return ((current - previous) / previous) * 100;
}

/**
 * 日期选择变量和方法
 */
const monthSelect = ref('')
const monthVisible = ref(false)
const setMonthVisible = async () => {
  loading.value = true
  try {
    // const data = await TenantApi.getTenantList()
    // tenantList.value = data;
    monthVisible.value = true
  } finally {
    loading.value = false
  }
}

/**
 * 传入字符串'2025-08' 返回8月最后一天格式为yyyy-MM-dd
 * @param dateStr
 */
function getLastDayOfMonth(dateStr) {
  const [year, month] = dateStr.split('-').map(Number);
  const lastDay = new Date(year, month, 0).getDate();
  return `${year}-${month.toString().padStart(2, '0')}-${lastDay.toString().padStart(2, '0')}`;
}

async function monthSelectSubmit() {
  await getAllList(tenantList.value[0].teamId, monthSelect.value);
  await getCountSum(monthSelect.value);
  queryExpandParams.expandTimeStr = [monthSelect.value + '-01 00:00:00',getLastDayOfMonth(monthSelect.value) + ' 23:59:59']
  monthVisible.value = false
  showRightDeteil.value = false
}

/**
 * 拓展记录清单变量和方法
 */
const dialogTableVisible = ref(false)
const setDialogTableVisible = async () => {

  dialogTableVisible.value = true
}
/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await ExpandRecordApi.exportExpandRecord(queryParams)
    download.excel(data, '拓展记录.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}
const checkedIds = ref<number[]>([])
const handleRowCheckboxChange = (records: ExpandRecord[]) => {
  checkedIds.value = records.map((item) => item.id)
}
const dialogTitle = ref('')
/** 拓展记录 列表 */
defineOptions({name: 'ExpandRecord'})

const {t} = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const formLoading = ref(false) // 列表的加载中

const list = ref<ExpandRecord[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const expandTotal = ref(0) // 列表的总页数
const firstDay = ref(new Date(new Date().getFullYear(), new Date().getMonth(), 1).getFullYear()+ '-'
  + String(new Date(new Date().getFullYear(), new Date().getMonth(), 1).getMonth() + 1).padStart(2, '0')+'-'
  +  String(new Date(new Date().getFullYear(), new Date().getMonth(), 1).getDate()).padStart(2, '0'));
const lastDay = ref(new Date(new Date().getFullYear(), new Date().getMonth()+1, 0).getFullYear()+ '-'
  + String(new Date(new Date().getFullYear(), new Date().getMonth()+1, 0).getMonth() + 1).padStart(2, '0')+'-'
  +  String(new Date(new Date().getFullYear(), new Date().getMonth()+1, 0).getDate()).padStart(2, '0'));

const queryExpandParams = reactive({
  pageNo: 1,
  pageSize: 10,
  expandTimeStr: [firstDay.value + ' 00:00:00',lastDay.value + ' 23:59:59']
})
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  interviewee: undefined,
  intervieweePhone: undefined,
  intervieweePosition: undefined,
  customerRequire: undefined,
  breakthroughPoint: undefined,
  expandTime: [],
  businessType: undefined,
  expandProcess: undefined,
  expandSituation: undefined,
  customerType: undefined,
  customerLevel: undefined,
  nextTimeVisit: undefined,
  scenePictureUrl: undefined,
  securityReportUrl: undefined,
  serviceSchemeUrl: undefined,
  createTime: [],
  ownerUserId: undefined
})
const queryFormExpandRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

/**
 * 查询统计
 */
const gkQy = ref('')
const gkZje = ref('')
const getCharts = async () => {
  loading.value = true
  try {
    const data = await ExpandRecordApi.getExpandRecordGk()
    gkQy.value = data.qianyue;
    gkZje.value = parseFloat((data.total_price/10000).toFixed(2)) ;
  } finally {
    loading.value = false
  }
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ExpandRecordApi.getExpandRecordPage(queryParams)
    list.value = data.list
    console.info(list.value)
    markerPoints.value = list.value.map(item => ({
        lng: item.lng,
        lat: item.lat,
        name: item.interviewee,
        expandStatus: item.expandStatus,
        expandNo: item.expandNo,
        intervieweePhone: item.intervieweePhone,
        expandTime: formatTime(item.expandTime,'yyyy-MM-dd'),
        icon: item.expandStatus == '拓展中' ? expMarker1 :item.expandStatus == '客户维护' ? expMarker2 :expMarker3
    }))
    // console.info(markerPoints.value)
    showMap.value = true
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormExpandRef.value.resetFields()
  handleQuery()
}

/** 搜索按钮操作 */
const handleExpandQuery = () => {
  queryExpandParams.pageNo = 1
  getExpandList()
}

/** 重置按钮操作 */
const resetExpandQuery = () => {
  queryExpandParamsRef.value.resetFields()
  handleExpandQuery()
}
const countSum = ref(
{
  syqyhs: 0, // 上月签约户数
  bytz: 0, // 本月拓展
  bybf: 0, // 本月拜访
  qyhs: 0, // 本月签约户数
  qyje: 0.00, // 签约金额
  yqwxq: 0, // 逾期未续签
  dqxq: 0, // 到期续签
  bydqsk: 0.00, // 本月到期收款
  count: 0,
  bnqyhs: 0, // 本年签约
  bnqyje: 0.00, // 本年签约金额
})
/** 获取本月拓展，本月拜访，签约户数，签约金额，上月签约户数，本月到期收款，逾期未续签，到期续签 */
const getCountSum = async (month: string) => {
  // loading.value = true
  try {
    const data = await ExpandTargetApi.getCountSum({month: month})
    console.info(data)
    countSum.value = data
  } finally {
    // loading.value = false
  }
}

/** 查询列表 */
const getExpandList = async (month: string) => {
  loading.value = true
  expandTitle.value = '拓展客户'
  try {
    // queryExpandParams.value.month = month;
    const data = await ExpandTargetApi.getExpandTargetViewPage(queryExpandParams)
    expandList.value = data.records
    dialogExpandTableVisible.value = true
    expandTotal.value = data.total
  } finally {
    loading.value = false
  }
}


/** 查询列表 */
const getContractArchiveViewList = async (status: string) => {
  loading.value = true

  try {
    if ( status == '-1') {
      queryExpandParams.status = '2';
      expandTitle.value = '本月签约合同额'
      queryExpandParams.isRenew = '0';
    } else if(status == '-2' ) {
      queryExpandParams.status = '';
      queryExpandParams.isRenew = '1';
      expandTitle.value = '到期续约合同'
    } else if(status == '2') {
      expandTitle.value = '本月新签合同'
      queryExpandParams.isRenew = '0';
      queryExpandParams.status = '2';
    } else if ( status == '3') {
      queryExpandParams.isRenew = '';
      queryExpandParams.status = '3';
      expandTitle.value = '逾期未续签合同'
    }
    queryExpandParams.month = monthSelect.value;
    const data = await ExpandTargetApi.getContractArchiveViewList(queryExpandParams)
    expandList.value = data.records
    dialogExpandTableVisible.value = true
    expandTotal.value = data.total
  } finally {
    loading.value = false
  }
}



/** 查询列表 */
const getContractReceiveRecordViewList = async (status: string) => {
  loading.value = true
  expandTitle.value = '本月到期收款'
  try {
    // if ( status == '-1') {
    //   queryExpandParams.status = '0';
    //   expandTitle.value = '本月签约合同额'
    // } else {
      queryExpandParams.status = status;
    // }
    queryExpandParams.month = monthSelect.value;
    const data = await ExpandTargetApi.getContractReceiveRecordViewList(queryExpandParams)
    expandList.value = data.records
    dialogExpandTableVisible.value = true
    expandTotal.value = data.total
  } finally {
    loading.value = false
  }
}

/** 导出按钮操作 */
const handleExpandExport = async (month: string) => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    // queryExpandParams.value.month = month;
    const data = await ExpandTargetApi.exportExpandTargetView(queryExpandParams)
    download.excel(data, '拓展记录.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/**
 * 拓展详情相关
 * @param id
 */
const showDialog = ref(false);
const formRef = ref()
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const openForm = async (id?: number) => {
  // formRef.value.open(type, id)
  console.info(id)
  dialogTitle.value = '拓展详情'
  formType.value = 'update'

  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ExpandRecordApi.getExpandRecord(id)
      console.info(formData.value)
      showDialog.value = true

    } finally {
      formLoading.value = false
      showDialog.value = true

    }
  }
}
const formData = ref({
  id: undefined,
  interviewee: undefined,
  intervieweePhone: undefined,
  intervieweePosition: undefined,
  customerRequire: undefined,
  breakthroughPoint: undefined,
  expandTime: undefined,
  businessType: undefined,
  expandProcess: undefined,
  expandSituation: undefined,
  customerType: undefined,
  customerLevel: undefined,
  nextTimeVisit: undefined,
  scenePictureUrl: undefined,
  securityReportUrl: undefined,
  serviceSchemeUrl: undefined,
  ownerUserId: undefined,
  lng: undefined,
  lat: undefined
})

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    interviewee: undefined,
    intervieweePhone: undefined,
    intervieweePosition: undefined,
    customerRequire: undefined,
    breakthroughPoint: undefined,
    expandTime: undefined,
    businessType: undefined,
    expandProcess: undefined,
    expandSituation: undefined,
    customerType: undefined,
    customerLevel: undefined,
    nextTimeVisit: undefined,
    scenePictureUrl: undefined,
    securityReportUrl: undefined,
    serviceSchemeUrl: undefined,
    ownerUserId: undefined,
    lng: undefined,
    lat: undefined
  }
  // formRef.value?.resetFields()
}

// 客户信息详情
const visitCustomer = ref(
  [
    {
      name: '拜访客户',
      value: '29',
      unit: '户'
    },
    {
      name: '成功签约',
      value: '2',
      unit: '户'
    },
    {
      name: '拜访/新拓',
      value: '45/15',
      unit: '次'
    },
    {
      name: '安全评测',
      value: '0',
      unit: '户'
    },
    {
      name: '收款跟踪',
      value: '2',
      unit: '次'
    },
    {
      name: '续签跟踪',
      value: '4',
      unit: '次'
    },
    {
      name: '关系维护',
      value: '13',
      unit: '次'
    },
    {
      name: '增值业务',
      value: '0',
      unit: '次'
    }
  ]
);

/**
 * 地图相关
 */
// 从环境变量获取AK
const bmapAk = import.meta.env.VITE_BAIDU_MAP_AK
const showMap = ref(false)
// 地图中心点
const mapCenter = ref({
  lng: 116.404,
  lat: 39.915
});
const baiduMap = ref();
const setCenterMap = async (item) => {
  // baiduMap.onUnmounted()
  showMap.value = false;
  setTimeout(() => {
    mapCenter.value = {
      lng: item.lng,
      lat: item.lat
    }
    zoomLevel.value = 15
    // baiduMap.onMounted()
    showMap.value = true;
    // var newPoint = new BMap.Point(item.lng,item.lat); // 坐标
    // baiduMap.panTo(newPoint); // 会以动画方式移动到新中心点
  }, 10)


}

// 缩放级别
const zoomLevel = ref(6);
let showRightDeteil = ref(false);

// 标记点数据
const markerPoints = ref([
  {
    lng: 116.404,
    lat: 39.915,
    name: '天安门',
    icon: expMarker1
  },
  {
    lng: 116.41,
    lat: 39.92,
    name: '故宫博物院',
    icon: expMarker2
  },
  {
    lng: 116.39,
    lat: 39.91,
    name: '人民大会堂',
    icon: expMarker3

  }
]);

const visitName = ref('')
const allUserExpand = ref([])
const expandRecordPage = ref([])


// 拓展详情
function handelShowRightDeteil(item) {
  visitName.value = item.user.nickname
  visitCustomer.value[0].value = item.expandRecordCountRespVO.bfkh
  visitCustomer.value[1].value = item.expandRecordCountRespVO.cgqy
  visitCustomer.value[2].value = item.expandRecordCountRespVO.bfcs + '/' + item.expandRecordCountRespVO.tx
  visitCustomer.value[3].value = item.expandRecordCountRespVO.aqpc
  visitCustomer.value[4].value = item.expandRecordCountRespVO.skgz
  visitCustomer.value[5].value = item.expandRecordCountRespVO.xygz
  visitCustomer.value[6].value = item.expandRecordCountRespVO.gxwh
  visitCustomer.value[7].value = item.expandRecordCountRespVO.zzyw
  getExpandRecordPage(item.user.id)
  loading.value = true
  showRightDeteil.value = true
}

/** 折线图配置 */
const chartsShow = ref(false)
const echartsOption = reactive<EChartsOption>({
  tooltip: {
    trigger: 'axis',
    // formatter: '{b} : {c} %',
    axisPointer: {
      lineStyle: {
        color: '#ffffff'
      }
    }
  },
  legend: {
    icon: 'rect',
    itemWidth: 14,
    itemHeight: 5,
    itemGap: 13,
    data: ['拓展用户数', '拜访次数'],
    // right: '4%',
    top: '2%',
    textStyle: {
      fontSize: 10,
      color: '#F1F1F3'
    }
  },
  grid: {
    left: '5%',
    right: '4%',
    bottom: '8%',
    top: '20%',
    containLabel: true,
    backgroundColor: 'rgb(83, 137, 162,0)'
  },
  xAxis: [{
    type: 'category',
    boundaryGap: false,
    axisLine: {
      lineStyle: {
        color: 'rgb(83, 137, 162)'
      }
    },
    axisLabel: {
      fontSize: 10,
      color: '#ffffff' // 设置x轴标签文字颜色为红色
    },
    data: yearList // ['2025-01', '2025-02', '2025-03', '2025-04', '2025-05', '2025-06', '2025-07', '2025-08', '2025-09', '2025-10', '2025-11', '2025-12']
  }],
  yAxis: [{
    minInterval: 1,
    splitNumber: 3, // 建议分割段数
    type: 'value',
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#57617B'
      }
    },
    axisLabel: {
      margin: 10,
      formatter: '{value} ', // 设置 y 轴标签为百分比形式
      textStyle: {
        fontSize: 10,
        color: '#cae4ff'
      }
    },
    // splitLine: {
    //   lineStyle: {
    //     color: '#57617B'
    //   }
    // },
    splitArea: {
      show: false // 是否显示分隔区域
    },
    splitLine: {
      show: false, // 是否显示分隔线
      lineStyle: {
        type: "dashed",
        color: "#3c56ba"
      }
    },
  }],
  series:
    [
      {
        name: '拓展用户数',
        type: 'line',
        smooth: true,
        lineStyle: {
          normal: {
            width: 1
          }
        },
        itemStyle: {
          normal: {
            color: 'rgb(137,189,27)'
          }
        },
        data: customerYearList //[245, 234, 345, 567, 643, 456, 435]
      }, {
      name: '拜访次数',
      type: 'line',
      smooth: true,
      lineStyle: {
        normal: {
          width: 1
        }
      },
      itemStyle: {
        normal: {
          color: 'rgb(0,136,212)'
        }
      },
      data: targetsCustomerTotal // [0 , 0 , 0 , 0 , 0 ,  0,0  ]
    }]
}) as EChartsOption

const echartsOption2 = reactive<EChartsOption>({
  tooltip: {
    trigger: 'axis',
    // formatter: '{b} : {c} %',
    axisPointer: {
      lineStyle: {
        color: '#ffffff'
      }
    }
  },
  legend: {
    icon: 'rect',
    itemWidth: 14,
    itemHeight: 5,
    itemGap: 13,
    data: ['本月新签合同'],
    // right: '4%',
    top: '2%',
    textStyle: {
      fontSize: 10,
      color: '#F1F1F3'
    }
  },
  grid: {
    left: '5%',
    right: '4%',
    bottom: '8%',
    top: '20%',
    containLabel: true,
    backgroundColor: 'rgb(83, 137, 162,0)'
  },
  xAxis: [{
    type: 'category',
    boundaryGap: false,
    axisLine: {
      lineStyle: {
        color: 'rgb(83, 137, 162)'
      }
    },
    axisLabel: {
      fontSize: 10,
      color: '#ffffff' // 设置x轴标签文字颜色为红色
    },
    data: yearList
  }],
  yAxis: [{
    minInterval: 1,
    splitNumber: 3, // 建议分割段数
    type: 'value',
    axisTick: {
      show: false
    },
    axisLine: {
      lineStyle: {
        color: '#57617B'
      }
    },
    axisLabel: {
      margin: 20,
      formatter: '{value} ', // 设置 y 轴标签为百分比形式
      textStyle: {
        fontSize: 10,
        color: '#cae4ff'
      }
    },
    // splitLine: {
    //   lineStyle: {
    //     color: '#57617B'
    //   }
    // },
    splitArea: {
      show: false // 是否显示分隔区域
    },
    splitLine: {
      show: false, // 是否显示分隔线
      lineStyle: {
        type: "dashed",
        color: "#3c56ba"
      }
    },
  }],
  series:
    [
      {
        name: '本月新签合同',
        type: 'line',
        smooth: true,
        lineStyle: {
          normal: {
            width: 1
          }
        },
        itemStyle: {
          normal: {
            color: 'rgb(0, 204, 255)'
          }
        },
        data: signYearList // [5, 0, 19, 12, 11, 8, 6]
      },]
}) as EChartsOption

// 模拟数据 - 您需要替换为实际的地理坐标
const data = [
  {name: '汇置向西2期开湾', value: [123.4, 41.8]},
  {name: '水岸-3期', value: [123.38, 41.82]},
  {name: '辽宁大学北校区', value: [123.41, 41.92]},
  {name: '汇置尚都', value: [123.39, 41.85]},
  // 添加其他地点...
];

const echartsOptionMap = reactive<EChartsOption>({

  // 1
  title: {
    text: '客户分布地图',
    left: 'center'
  },
  tooltip: {
    trigger: 'item',
    formatter: params => {
      if (params.seriesType === 'scatter') {
        return `${params.data.name}`;
      }
      return params.name;
    }
  },
  visualMap: {
    min: 0,
    max: 100,
    text: ['高', '低'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    }
  },
  geo: {
    map: 'china',
    roam: true, // 允许缩放和平移
    zoom: 1.2, // 初始缩放级别
    center: [116.4, 39.9], // 初始中心点(北京)
    label: {
      show: true
    },
    itemStyle: {
      areaColor: '#e6f7ff',
      borderColor: '#2973ad',
      borderWidth: 1
    },
    emphasis: {
      itemStyle: {
        areaColor: '#a7d8ff'
      }
    }
  },
  series: [
    {
      name: '客户分布',
      type: 'scatter',
      coordinateSystem: 'geo',
      data: data,
      symbolSize: 12,
      encode: {
        value: 2
      },
      label: {
        formatter: '{b}',
        position: 'right',
        show: true
      },
      itemStyle: {
        color: '#d94e5d'
      },
      emphasis: {
        label: {
          show: true
        }
      }
    },
    {
      name: '热力图',
      type: 'heatmap',
      coordinateSystem: 'geo',
      data: data,
      pointSize: 10,
      blurSize: 15
    }
  ]

}) as EChartsOption

const getExpandRecordPage = async (id) => {
  loading.value = true
  try {
    const data = await ExpandRecordApi.getExpandRecordCurrent({id: id, month: monthSelect.value})
    // allUserExpand.value = data
    expandRecordPage.value = data
    let options = [];
    ExpandProcessOptionsGroup.forEach((a) => {
      a.options.forEach((b) => {
        options.push(b)
      })
    })
    // console.info(expandRecordPage.value );
  } finally {
    loading.value = false
  }
}

/** 查询右侧拓展列表 */
const getAllList = async (id: number, month: string) => {
  loading.value = true
  try {
    const data = await ExpandRecordApi.countAllUserExpand({id: id, month: month});
    data.sort((a, b) => b.expandRecordCountRespVO.bfkh - a.expandRecordCountRespVO.bfkh);
    allUserExpand.value = data
    // console.info(allUserExpand);
  } finally {
    loading.value = false
  }
}
/** 初始化 **/
onMounted(() => {
  monthSelect.value = formatTime(new Date(), 'yyyy-MM');
  getList();
  // getCountSum()
  getCharts();
  getCustomerTotalList();
  getSalesTeamList();
  // queryExpandParams.value.expandTimeStr = ['2025-09-01 00:00:00','2025-09-30 23:59:59']
})

</script>
<style scoped lang="scss">
.expendC1 {
  background-color: rgb(73, 167, 228)
}

.expendC2 {
  background-color: rgb(218, 136, 61)
}

.expendC3 {
  background-color: rgb(9, 153, 71)
}

.right-detail-item-div-no {
  font-size: 14px;
  color: #fafafa
}

.right-detail-item-div-title {
  width: 100%;
  height: 20px;
  text-align: center
}

.right-detail-item {
  margin-top: 8px;
  float: left;
  width: 25%;
  height: 65px;
  padding: 0 4px;

}

.right-detail-item-div {
  justify-content: center;
  position: relative;
  display: grid;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  width: 100%;
  height: 100%;
}

.right-table:hover {
  background-color: rgb(57, 115, 162, 0.5);
}

/* 整个滚动条 */
::-webkit-scrollbar {
  width: 2px;
  height: 12px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: rgba(159, 177, 204, 0.1);
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #01c7bc;
  border-radius: 10px;
}

/* 滚动条滑块在鼠标悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #1f58d7;
}

.left-table-item-i {
  color: #c0e4ff;
  margin-left: 3px;
  font-size: 11px;
}

.left-table-item-left {
  //text-align: left;
  //margin-left: 12px
}

.left-table-item2 {
  float: left;
  display: grid;
  width: 33%;
  margin-top: 12px;
  height: calc(100% - 12px);
  position: relative;
  justify-content: center;
  align-items: center;
  background-image: url("../../assets/imgs/screen/card-bg.png");
  background-size: 90% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.right-table-item-name2 {
  color: #c0e4ff;
  font-size: 12px;
}

.right-table-item-value {
  color: #ffffff;
  float: left;
  height: 18px;
  line-height: 16px;
  margin-left: 3px;
  font-size: 13px;
  text-align: center;
}

.right-table-item {
  width: 25%;
  height: 75%;
  float: left;
  display: grid;
  position: relative;
  justify-content: center;
  align-items: center;
}

.right-table-item-name {
  color: #ffffff;
  float: left;
  height: 18px;
  line-height: 16px;
  margin-left: 6px;
  font-weight: 500;
  font-size: 13px;
}

.right-table {
  cursor: pointer;
  height: 60px;
  margin-top: 4px;
  width: 100%;
  position: relative;
  justify-content: center;
  align-items: center;
  background-image: url("../../assets/imgs/screen/right-bg.png");
  background-size: 78% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0 30px;
}

.right-top {
  float: left;
  font-size: 10px;
  color: rgb(7, 210, 250);
  line-height: 4vh;
  cursor: pointer;
}

#expand {
  position: relative;
  justify-content: center;
  //align-items: center;
  height: 100vh;
  width: 100vw;
  background-image: url("../../assets/imgs/screen/expand_bg.jpg");
  background-size: 100vw 100vh;
}

.left-table1 {
  height: 16vh;
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/box-bg.png");
  background-size: 100% 100%;
}

.left-head1 {
  height: 4vh;
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/work_left_1.png");
  background-size: 100%;
}

.left-body1 {
  height: calc(100% - 4vh);
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/right-bg.png");
  background-size: 94%;
  background-position: center;
  background-repeat: no-repeat;
}

.left-table2 {
  margin-top: 12px;
  height: 24vh;
  width: 100%;
  background-image: url("../../assets/imgs/screen/box-bg.png");
  background-size: 100% 100%;
}

.left-head2 {
  height: 4vh;
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/expand-left-1.png");
  background-size: 100%;
}

.left-body2 {
  height: calc(100% - 4vh);
  margin-top: -4px;
  width: 100%;
}

.left-table3 {
  margin-top: 12px;
  height: 25.5vh;
  width: 100%;
  background-image: url("../../assets/imgs/screen/box-bg.png");
  background-size: 100% 100%;
}

.left-head3 {
  height: 4vh;
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/expand-left-2.png");
  background-size: 100%;
}

.left-body3 {
  height: calc(100% - 4vh);
  margin-top: -4px;
  width: 100%;
}

.left-table4 {
  height: 16vh;
  margin-top: 12px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/box-bg.png");
  background-size: 100% 100%;
}

.left-head4 {
  height: 4vh;
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/expand-left-3.png");
  background-size: 100%;
}

.left-head5 {
  height: 4vh;
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/expand-right-1.png");
  background-size: 84%;
  background-repeat: no-repeat;
}

.left-body4 {
  height: calc(100% - 4vh);
  margin-top: -4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/right-bg.png");
  background-size: 94%;
  background-position: center;
  background-repeat: no-repeat;
}

.left-table5 {
  height: calc(96vh - 84px);
  margin-top: 4px;
  width: 100%;
  background-image: url("../../assets/imgs/screen/box-bg.png");
  background-size: 100% 100%;
}

.right-button {
  float: right;
  padding: 5px;
  width: max-content;
  font-size: 10px;
  border: 1px solid #12528d;
  color: #c0e4ff;
  background-color: rgba(3, 41, 77, .8);
  cursor: pointer;
}

.vue-table {
  width: 100%;
  border-collapse: collapse;
}

.vue-table th, .vue-table td {
  border: 0px solid #ddd;
  padding: 8px;
  text-align: left;
}

.vue-table th {
  //background-color: #f2f2f2;
  position: sticky;
  top: 0;
}

.vue-table tr:nth-child(even) {
  //background-color: #f9f9f9;
}

.vue-table tr:hover {
  //background-color: #f1f1f1;
}
</style>

<style lang="scss" scoped>
::v-deep(section) {
  padding: 0;
}

::v-deep(.el-dialog) {
  background-color: rgba(6, 27, 46, .7);
  border: 1px solid #74cefd;
  -webkit-box-shadow: rgba(127, 192, 236, .5) 0 8px 24px;
  box-shadow: 0 8px 24px rgba(127, 192, 236, .5);

}

.el-table {
  --el-table-bg-color: rgba(255,255,255,0); /* 表格背景色 */
  --el-table-header-bg-color: rgba(255,255,255,0); /* 表头背景色 */
  --el-table-tr-bg-color: rgba(255,255,255,0); /* 行背景色 */
}

::v-deep(.el-dialog){
  background-color: rgba(6, 27, 46, .7);  border: 1px solid #74cefd;  box-shadow: 0 8px 24px rgba(127, 192, 236, .5);
}
::v-deep(.el-scrollbar){
  margin-top: 0px;
}
::v-deep(label){
  color: #f0f0f0;
}
::v-deep(tr){
  color: #f0f0f0;
}
</style>
